<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>补充</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    <div id ="app">
        <!-- 值的绑定时候，用到了v-for-->
        <!-- 官方推荐我们在使用v-for的时候。最好给元素添加 :key属性，key作用主要是为了高效的更新虚拟DOM-->
        <!-- 这个其实和vue虚拟DOM中Diff算法有关系 -->
        <!-- :key属性是标识符，唯一,Diff算法会很容易定位到，识别节点-->
        <!-- <ul>
            <li v-for="item in name" :key="">{{name}}</li>
        </ul> -->

        <!-- 数组的响应 -->
        <!-- 因为Vue是响应式，所以当data发生变化的时候，Vue会自动检测数据变化,视图会发生改变 -->
        <h2>{{name}}</h2>
        <button @click="btnClick">button</button>
    </div>
    <script>
        let app = new Vue({
            el:"#app",
            data:{ 
                msg:'hello world',
                name:['A','D','B','C']
        },
        methods:{
            btnClick(){
                //把数组中第一个值改成"Shane"
                //数组通过下标的形式对数据进行改变，不是响应式
                this.name[0]="Shane"

                //数组的响应
                //vue包含了一些观察数组发生改变的编译方法，当调用这些方式的时候，数组数据发生改变，视图也会发生改变
                //1.push方法 在数组末尾添加数据
                //this.name.push('aaa')

                //2.pop方法 可以删除数组中的最后一个元素
                //this.name.pop()

                //3. shift方法，可以删除数组中第一个元素
                //this.name.shift()

                //4. unshift方法 往数组首位添加元素
                //this.name.unshift('aaaa')

                //5. splice方法 splice(开始的下标,删除个数,追加后面的元素...item)
                // //splice的作用:可以删除元素/插入元素/替换元素
                // this.name.splice(0,1,"shane",)

                // //...扩展符
                // //可变参数

                // let total =0
                // function sum(...item){
                //     //es5
                //     // for(let i=0;i<item.length;i++){
                //     //     total = total+item[i]
                //     // }
                //     //es6
                //     // for in 循环 拿出来的时下标
                //     for(i in item){
                //        total=total+item[i]
                //     }

                //     //for of  循环 拿出来的是元素
                //     for(i of item){
                //        total=total+i
                //     }
                //         //console.log(total);
                // }
                // sum(1,2,3)
                // //sum(2,5)

                //6. sort()方法
                this.name.sort()

                //7. reverse()方法
                this.name.reverse()

                //8. Vue提供了一个set方法，可以修改元素(要修改的元素，索引值，修改后的值)
                Vue.set(this.name,0,"Shane")
            }
        }
    })
    </script>
</body>
</html>